<template>
    <div class="inspectionTable">
        <div class="groupsName">
            <div :class="groupsIndex == 0 ? 'groups groups_active' : 'groups'" @click="changeNav(0)">锅炉班组</div>
            <div :class="groupsIndex == 1 ? 'groups groups_active' : 'groups'" @click="changeNav(1)">汽机班组</div>
            <div :class="groupsIndex == 2 ? 'groups groups_active' : 'groups'" @click="changeNav(2)">机务班组</div>
            <div :class="groupsIndex == 3 ? 'groups groups_active' : 'groups'" @click="changeNav(3)">安防班组</div>
        </div>
        <el-form class="form" :model="searchData" label-position="left">
            <el-form-item label="班组成员" class="code">
                <el-input v-model="searchData.params.name" placeholder="班组成员姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="searchData.params.name" placeholder="请选择时间段" clearable></el-input>
            </el-form-item>
            <el-form-item label="">
                <div class="btn">搜索</div>
            </el-form-item>
        </el-form>
        <el-table :data="state.data" style="width :100%;" border stripe :scrollbar-always-on="true">
            <el-table-column prop="t1" label="所属系统" class-name="column_date" align="left" />
            <el-table-column prop="t2" label="设备类别" class-name="column_date" align="left" />
            <el-table-column prop="t3" label="设备类型" class-name="column_common" align="left" />
            <el-table-column prop="t4" label="设备名称" align="left" />
            <el-table-column prop="t5" label="设备编号" align="left" />
            <el-table-column prop="t6" label="设备属性" align="left" />
            <el-table-column prop="t7" label="是否附属设备" align="left" />
        </el-table>
    </div>

</template>

<script setup lang="ts">

let groupsIndex = ref(0);

const changeNav = (index: number) => {
  if (groupsIndex.value != index) {
    groupsIndex.value = index;
  }
}

const searchData = reactive({
    pageNum: 1, //当前页
    pageSize: 10, //每页条目数
    params: {
        name: '',//规则名称
    }
})

let state = reactive({
    data: [
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
    ]
})

</script>

<style scoped lang="scss">
.inspectionTable {
    .groupsName {
        display: flex;
        margin-bottom: vh(19);
        .groups {
            min-width: vh(84);
            padding: vh(4) vh(14);
            background: rgba(0, 227, 254, 0);
            margin-right: vw(8);
            text-align: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(14);
            color: #FFFFFF;
            cursor: pointer;
        }
        .groups_active {
            background: rgba(0, 227, 254, 0.2);

        }
    }
    .el-form {
        display: flex;
        margin-bottom: vh(19);

        .el-form-item {
            display: flex;
            margin-right: vw(15);
        }

        :deep(.el-form-item__label) {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(14);
            color: #FFFFFF;
            letter-spacing: 1px;
        }

        .el-form-item__content {

            .el-input {
                width: vw(236);
                margin-right: vh(12);

                :deep(.el-input__wrapper) {
                    background: rgba(0, 0, 0, 0.2);
                    box-shadow: none;
                    border: vh(1) solid #267F8A;
                    border-radius: vh(3);
                    height: vh(28);

                    .el-input__inner {
                        color: #78BBCB !important;
                        font-size: vh(12);
                        line-height: vh(28);
                        height: vh(22);
                    }

                    .el-input__inner::placeholder {
                        color: #78BBCB
                    }
                }
            }
        }
    }
    .btn {
        width: vw(56);
        height: vh(28);
        background: #00B5CB;
        border-radius: vh(4);
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(14);
        color: #FFFFFF;
        line-height: vh(28);
        cursor: pointer;
    }
    :deep(.el-table) {
        border: 1px solid #5A7275;
        background-color: transparent;
        --el-table-border-color: transparent;

        .last {
            text-align: center;
            border-left: 1px solid #5A7275;
        }

        th {
            font-size: 12px;
            font-weight: bold;
            color: #9FF5FF;
            line-height: 1;

            border-bottom: 1px solid #5A7275;
        }

        /* 斑马纹颜色 */
        tr {
            font-size: 12px;
            font-weight: 400;
            color: #FFFFFF;
            // background: rgba(11, 26, 50, 0.6) !important;
            background-color: rgba(255, 255, 255, 0.05) !important;

            td {
                border-bottom: 1px solid #5A7275;
            }

            &:last-child {
                td {
                    border-bottom: none;

                }
            }

            .el-table__cell {
                // background: rgba(11, 26, 50, 0.6) !important;
                background-color: rgba(255, 255, 255, 0.05) !important;
                border-right: none;
                padding: 0;

                .cell {
                    line-height: vh(36);
                    height: vh(36);
                    padding: 0 vh(10);
                    font-size: vh(12);
                }
            }
        }



        /* 非斑马纹颜色 */
        .el-table__row--striped {
            .el-table__cell {
                // background: #2B424A !important;
                background-color: rgba(0, 170, 190, 0.05) !important;
            }

        }
    }

}
</style>
